<script lang="ts">
import Tools from '../views/Tools.vue';
import { dataType } from 'element-plus/es/components/table-v2/src/common';
</script>
<template>
    <el-menu router default-active="/manager" mode="vertical">
        <el-menu-item index="/manager">
            <el-badge value="" class="item">
                <el-icon>
                    <House />
                </el-icon>
                <span>首页</span>
            </el-badge>
        </el-menu-item>
        <el-menu-item index="/manager/share">
            <el-badge value="" class="item">
                <el-icon>
                    <Share />
                </el-icon>
                <span>共享</span>
            </el-badge>
        </el-menu-item>
        <!-- <el-menu-item index="/myfiles">
            <el-badge :value="3"  class="item">
                <el-icon>
                    <document />
                </el-icon>
                <span>我的稿件</span>
            </el-badge>
        </el-menu-item> -->
        <el-menu-item index="/censorfile">
            <el-badge value="" class="item">
                <el-icon>
                    <DocumentChecked />
                </el-icon>
                <span>审稿</span>
            </el-badge>
        </el-menu-item>
        <el-menu-item index="/manager/message">
            <el-badge value="99+" class="item">
                <el-icon>
                    <BellFilled />
                </el-icon>
                <span>消息</span>
            </el-badge>
        </el-menu-item>
        <!-- used to test -->
        <el-menu-item index="/manager/empty">
            <el-icon>
                <Check />
            </el-icon>
            <span>项目测试</span>
        </el-menu-item>
        <div style="position: absolute; bottom: 0;">
            <el-menu-item index="/manager/recycle">
                <el-icon>
                    <Delete />
                </el-icon>
                <span>回收站</span>
            </el-menu-item>
            <el-menu-item @click="drawer = true">
                <el-icon>
                    <Suitcase />
                </el-icon>
                <span>工作包</span>
            </el-menu-item>
            <el-drawer v-model="drawer" append-to-body="true" title="工具包(Tools)" direction="rtl" z-index="999">
                <template #default>
                    <Tools></Tools>
                </template>
            </el-drawer>
            <el-menu-item index="/setting">
                <el-badge value="" is-dot class="item">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>设置</span>
                </el-badge>
            </el-menu-item>
        </div>
    </el-menu>

    <!-- </el-col> -->
    <!-- <el-tabs tab-position="left" type="border-card" style="height: 100%;width: auto">
        <el-tab-pane label="用户管理">
            test
        </el-tab-pane>
        <el-tab-pane label="配置管理">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    </el-tabs> -->
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
const drawer = ref(false)

// var activeitem = document.URL.split('#')[1];
</script>
  
<style scoped>
.el-menu-item {
    justify-content: center;
    font-weight: bolder;
    font-size: large;
    width: fit-content;
    min-height: 70px;
    margin-top: 6px;
}

.el-menu--vertical {
    width: 100%;
    min-height: 300px;
    height: auto;
    background: #f9f9f9;
    border: none;
    --el-menu-hover-bg-color: none;
    padding-left: 5px;
}
</style>
  